<template>
    <div>
        <div class="map-container">

            <!--     地图  开始   -->
            <div id="map" class="map"></div>
            <!--     地图  结束   -->

                <!--     地图菜单左 开始    -->
                <div class="menu-left">
                    <!-- 左侧菜单顶部容器 开始 -->
                    <div class="left-head-container">
                        <!-- 天气容器 开始  -->
                        <div class="weather-box">
                            <div class="roll-Time">
                                <div>16:24</div>
                                <div>2022-04-27</div>
                            </div>
                            <div class="icon-box">
                                <img class="icon" :src="require('@/assets/bigScreenHome/weather-icon.png')"/>
                                <div>多云</div>
                            </div>
                            <div class="location-box">
                                <div>26℃</div>
                                <div>
                                    <!--   地标图标    -->
                                    <div class='pin'></div>
                                    <div class='pulse'></div>
                                    <div class="location">成都市龙泉驿区</div>
                                </div>
                            </div>
                        </div>
                        <!-- 天气容器 结束  -->
                        <!-- 设备容器 开始  -->
                        <div class="equipment-box">
                            <div class="item-box" v-for="item in equipmentData">
                                <img :src="item.img"/>
                                <div class="item-content">
                                    <div>{{item.desc}}</div>
                                    <div>{{item.total}}</div>
                                    <div>{{item.onlinePercent}}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 设备容器 结束  -->
                    </div>
                    <!-- 左侧菜单顶部容器 结束  -->
                    <!-- 左侧菜单中部容器 开始 -->
                    <div class="left-middle-container">
                        <div class="title-box">
                            <div class="title-content">
                                <div>平安乡村</div>
                                <div>Peace countryside</div>
                            </div>
                            <Select class="selector" style="width:80px">
                                <Option v-for="item in selectorData" :value="item" :key="item">{{ item }}</Option>
                            </Select>
                        </div>
                        <div class="table-header">
                            <div>设备名称</div>
                            <div>设备类型</div>
                            <div>设备状态</div>
                        </div>
                        <div class="scroll-container">
                            <div class="under-container">
                                <vueSeamlessScroll :data="scrollData" :class-option="defaultOption">
                                    <div class="table-item" v-for="item in scrollData">
                                        <div>{{ item.name }}</div>
                                        <div>{{ item.type }}</div>
                                        <div>
                                            <div :class="item.status ? 'correct':'incorrect'"></div>
                                            {{item.status ? '在线':'离线'}}
                                        </div>
                                    </div>
                                </vueSeamlessScroll>
                            </div>
                        </div>
                    </div>
                    <!-- 左侧菜单中部容器 结束 -->
                    <!-- 左侧菜单底部容器 开始 使用顶部容器样式 -->
                    <div class="left-head-container">
                        <div class="title-box" style="margin: 8px 20px 0 20px">
                            <div class="title-content">
                                <div>应急广播</div>
                                <div>Emergency broadcast</div>
                            </div>
                        </div>
                        <div id="echart1" class="left-under-chart"></div>
                    </div>
                    <!-- 左侧菜单底部容器 结束 -->
                </div>
                <!--     地图菜单左 结束    -->

                <!--     地图菜单右 开始    -->
                <div class="menu-right">
                    <!--   饼图列表 开始  -->
                    <div class="right-head-container">
                        <div class="title-box">
                            <div class="title-content">
                                <div>用户分布</div>
                                <div>User distribution</div>
                            </div>
                        </div>
                        <div class="right-head-charts" >
                            <!--  饼图列表 开始 -->
                            <div class="charts">
                                <div v-for="(item,index) in 5" :id="`echart${index+2}`" class="each-chart"></div>
                            </div>
                            <!--  饼图列表 结束 -->
                            <!--  饼图右侧文字 开始 -->
                            <div class="chart-content-box" >
                                <div class="charts-content" v-for="(item,index) in chartsContentData">
                                    <div class="title">
                                        <img :src="item.icon"/>
                                        <div>{{ item.title }}</div>
                                    </div>
                                    <div class="nums">
                                        <div>{{item.num}}</div>
                                        <img :src="item.status ? require('@/assets/bigScreenHome/up.png'):require('@/assets/bigScreenHome/down.png')"/>
                                        <div class="gain" :style="{color:item.status ? '#FFD15C':'#3BDD68'}">{{item.percent}}%</div>
                                    </div>
                                </div>
                            </div>
                            <!--  饼图右侧文字 结束 -->
                        </div>
                    </div>
                    <!--   饼图列表 结束  -->
                    <div class="right-bottom-container">
                        <div class="title-box">
                            <div class="title-content">
                                <div>龙泉驿区资讯</div>
                                <div>JianGe information</div>
                            </div>
                        </div>
                        <div style="overflow: hidden;height:170px;padding: 10px">
                            <vueSeamlessScroll :data="scrollData2" :class-option="defaultOption">
                                <div class="scroll-box" v-for="item in scrollData2">
                                    <img :src="item.img"/>
                                    <div class="content-box">
                                        <div>{{item.title}}</div>
                                        <div>{{item.time}}</div>
                                    </div>
                                </div>
                            </vueSeamlessScroll>
                        </div>
                    </div>
                </div>
                <!--     地图菜单右 结束    -->


            <!--   地图下方菜单 开始   -->
            <div class="bottom-menu-container">
                <div class="item" v-for="item in menuBottomData">
                    <img :src="item.img"/>
                    <div class="item-content">
                        <div class="title">{{item.title}}</div>
                        <div class="num">{{item.num}}</div>
                    </div>
                </div>
            </div>
            <!--   地图下方菜单 结束   -->

            <!--   地图下方菜单(小) 开始   -->
            <div class="bottom-menu-left-container">
               <div class="item" v-for="item in menuBottomLeftData">
                   <img :src="item.img"/>
                   <span>{{ item.title }}</span>
               </div>

            </div>
            <!--   地图下方菜单(小) 结束   -->
        </div>
        <!--   弹窗   -->

    </div>
</template>
<script>
import * as echarts from "echarts";
import vueSeamlessScroll from "vue-seamless-scroll";
import 'echarts-gl'
export default {
    components: {vueSeamlessScroll},
    data() {
        const self = this;
        return {
            interVal: null,
            currIndex: 0, //默认第一个高亮
            scrollData:[
                {
                    name:'移民村一组',
                    type:'防火',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    type:'雪亮',
                    status:0,
                },
                {
                    name:'移民村二组',
                    type:'防火',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    type:'综治',
                    status:1,
                },
                {
                    name:'移民村二组',
                    type:'防火',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    type:'综治',
                    status:1,
                },

            ],
            defaultOption:{
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
            center: [104.280751,30.597593],
            marker:require('../../../assets/bigScreenHome/five-star.png'),
            yytIcon:require('@/assets/bigScreenHome/yyt-icon.png'),
            gfwdIcom:require('@/assets/bigScreenHome/gfwd-icon.png'),
            equipmentData:[
                {
                    img:require('@/assets/bigScreenHome/camera-icon.png'),
                    desc:'平安乡村设备',
                    total:134,
                    onlinePercent:'在线率:98%',
                },
                {
                    img:require('@/assets/bigScreenHome/trumpet-icon.png'),
                    desc:'应急广播设备',
                    total:37,
                    onlinePercent:'在线率:96%',
                }
            ],
            selectorData:['全部','当日','近30天','近90天','近一年'],
            scrollData2:[
                {
                    img:require('@/assets/bigScreenHome/mv-2.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-31 11:13:04'
                },
                {
                    img:require('@/assets/bigScreenHome/mv-3.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-24 11:13:04'
                },
                {
                    img:require('@/assets/bigScreenHome/mv-4.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-31 11:13:04'
                },
                {
                    img:require('@/assets/bigScreenHome/mv-5.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-22 11:13:04'
                },
            ],
            menuBottomData:[
                {
                    img:require('@/assets/bigScreenHome/yyt.png'),
                    title:'营业厅共计',
                    num:32,
                },
                {
                    img:require('@/assets/bigScreenHome/gfwd.png'),
                    title:'公服网点共计',
                    num:18,
                },
                {
                    img:require('@/assets/bigScreenHome/bsc.png'),
                    title:'公司办事处',
                    num:6,
                },
            ],
            menuBottomLeftData:[
                {
                    img:require('@/assets/bigScreenHome/yyt-icon.png'),
                    title:'营业厅',
                },
                {
                    img:require('@/assets/bigScreenHome/gfwd-icon.png'),
                    title:'公服网点',
                },
            ],
            chartsContentData:[
                {
                    icon:require('@/assets/bigScreenHome/5g-icon.png'),
                    title:'5G用户',
                    num:1254,
                    percent:12,
                    status:1,
                },
                {
                    icon:require('@/assets/bigScreenHome/tv-icon.png'),
                    title:'有线电视用户',
                    num:54,
                    percent:9,
                    status:1,
                },
                {
                    icon:require('@/assets/bigScreenHome/tv-icon-2.png'),
                    title:'地面数字电视',
                    num:12,
                    percent:14,
                    status:0,
                },
                {
                    icon:require('@/assets/bigScreenHome/user-icon.png'),
                    title:'户户通用户',
                    num:154,
                    percent:5,
                    status:1,
                },
                {
                    icon:require('@/assets/bigScreenHome/bandwidth-icon.png'),
                    title:'宽带用户',
                    num:125,
                    percent:22,
                    status:0,
                }
            ],
            infoWindow:{},
            curPoint:{},
            /** 随便选的点 */
            pointList:[
                /*龙泉驿区政府 */
                {
                    location:'龙泉驿区',
                    lngLat:[104.27536,30.556808],
                    img:require('@/assets/bigScreenHome/fwwd.png'),
                    phone:'15394612646',
                    specificLocaltion:'四川省成都市龙泉驿区',
                },

                /* 龙泉街道办事处 */
                {
                    location:'龙泉街道办',
                    lngLat: [104.265402,30.562251],
                    type:1,
                    img:require('@/assets/bigScreenHome/excel_11.png'),
                    phone:'15394613646',
                    specificLocaltion:'四川省成都市龙泉街道办事处',
                },

                /* 洛带古镇 */
                {
                    location:'洛带古镇',
                    lngLat: [104.328033,30.635452],
                    type:0,
                    img:require('@/assets/bigScreenHome/excel_12.png'),
                    phone:'15395613646',
                    specificLocaltion:'洛带古镇',
                },
                /* 十陵镇 */
                {
                    location:'十陵镇',
                    lngLat: [104.172438,30.645829],
                    type:1,
                    img:require('@/assets/bigScreenHome/excel_13.jpg'),
                    phone:'15294613646',
                    specificLocaltion:'四川省成都市十陵镇',
                }

            ]

        };
    },
    beforeDestroy() {

    },
    created() {
        /** 使用原生绑定事件 */
        window.closeWindow=()=>{
           this.infoWindow.close()
        }
    },
    mounted() {
        this.initMap()
        this.initEchart1();
        this.initEchart2();
        // this.$Notice.error({
        //     title: '注意数据仅展示，并非真实数据'
        // })
    },
    computed: {
    },
    methods: {
        //初始化地图
        initMap() {

            let amap = new AMap.Map("map", {
                // layers: [imgLayer],
                layers: [
                    //只显示默认图层的时候，layers可以缺省
                    AMap.createDefaultLayer(), //高德默认标准图层
                ],
                center: this.center,
                zoom: 11.5,
                viewMode: "2D", // 地图模式
                resizeEnable: true, //是否监控地图容器尺寸变化
                mapStyle: "amap://styles/darkblue",
            });
            this.map = amap;
            amap.on("complete", (res) => {
                this.districtSearch();
                this.addPoint();
            });
        },
        //添加点坐标
        addPoint() {
            this.map.clearMap();
            let content =''
            this.pointList.forEach(point=>{
               if(point.type){
                    content =
                       `<div><img style="width: 42px;height: 58px" src="${this.yytIcon}"/></div>`;
               }else{
                    content =
                       `<div><img style="width: 42px;height: 58px" src="${this.gfwdIcom}"/></div>`;
               }
               if(point.location==='龙泉驿区'){
                   content =
                       `<div><img src="${this.marker}"/></div>`;
               }
                var marker = new AMap.Marker({
                    map: this.map,
                    position:  point.lngLat,
                    content: content, //自定义覆盖物,
                    extData: point
                });
                //鼠标点击marker弹出自定义的信息窗体
                marker.on("click", (e) => {
                    console.log('点击了：',e)
                    this.curPoint = e.target._originOpts.extData
                    this.initInfoWindow(marker)
                    // this.infoWindow.open(this.map, marker.getPosition());
                });
            })


        },
        initInfoWindow(marker) {
            let content =
                ` <div class="model">
                  <img class="pointLine" src="${require('@/assets/bigScreenHome/pointLine.png')}"/>
            <div class="button" onclick="closeWindow()">
                <img src="${require('@/assets/bigScreenHome/close-icon.png')}"/>
            </div>
            <div style="margin: 15px 10px">
                <div class="title">${marker._originOpts.extData.location}${marker._originOpts.extData.type ? '营业厅':'公服网点'}</div>
            </div>
            <img class="image" src="${marker._originOpts.extData.img}"/>
            <div class="location-text">
                <div>网点位置：<span>${marker._originOpts.extData.specificLocaltion}</span></div>
                <div>联系电话：<span>${marker._originOpts.extData.phone}</span></div>
            </div>
        </div>`;
            // 创建 infoWindow 实例
            this.infoWindow = new AMap.InfoWindow({
                isCustom: true,
                autoMove:true,
                closeWhenClickMap:true,
                showShadow:true,
                content: content, //传入 dom 对象，或者 html 字符串
                offset: new AMap.Pixel(400, -172),
                retainWhenClose: true,
            });
            this.infoWindow.setMap(this.map);
            this.infoWindow.open(this.map, marker.getPosition());
        },
        //边界设置
        districtSearch() {
            let that = this;
            var district = null;
            var polygons = [];
            //实例化DistrictSearch
            var opts = {
                subdistrict: 0, //获取边界不需要返回下级行政区
                extensions: "all", //返回行政区边界坐标组等具体信息
                level: "district", //查询行政级别为 市
            };
            district = new AMap.DistrictSearch(opts);
            //行政区查询
            // district.setLevel(document.getElementById('level').value)
            district.search("龙泉驿区", function (status, result) {
                that.map.remove(polygons); //清除上次结果
                polygons = [];
                var bounds = result.districtList[0].boundaries;
                if (bounds) {
                    for (var i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        var polygon = new AMap.Polygon({
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.2,
                            fillColor: "#1883f5",
                            strokeColor: "#007efc",
                        });
                        polygons.push(polygon);
                    }
                }
                that.map.add(polygons);
                // that.map.setFitView(polygons); //视口自适应
            });
        },
        initEchart1() {
            var img = require('@/assets/bigScreenHome/chart1-center-icon.png')
            var trafficWay = [
                {
                    name: "IP广播（个）",
                    value: 137,
                },
                {
                    name: "调频广播（个）",
                    value: 56,
                },

            ];
            var data = [];
            var color = [
                "#00ffff",
                "#ff5b00",
                "#ffe000",
                "#00ff00",
                "#ffa800",
                "#ff5b00",
                "#ff3000",
            ];
            for (var i = 0; i < trafficWay.length; i++) {
                data.push(
                    {
                        value: trafficWay[i].value,
                        name: trafficWay[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                shadowBlur: 20,
                                borderColor: color[i],
                                shadowColor: color[i],
                            },
                        },
                    },
                    {
                        value: 20,
                        name: "",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                                color: "rgba(0, 0, 0, 0)",
                                borderColor: "rgba(0, 0, 0, 0)",
                                borderWidth: 0,
                            },
                        },
                    }
                );
            }
            var seriesOption = [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,
                    center: ["50%", "45%"],
                    radius: [70, 70],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                length: 5,
                                length2: 30,
                                show: false,
                                color: "#00ffff",
                            },
                        },
                    },
                    data: data,
                },
            ];
            let option = {
                color: color,
                // title: {
                //     text: "总计/人",
                //     subtext: "17318",
                //     x: "center",
                //     top: "35%",
                //     textStyle: {
                //         color: "#fff",
                //         fontSize: 16,
                //         fontWeight: "400",
                //     },
                //     subtextStyle: {
                //         color: "#fff",
                //         fontSize: 24,
                //         fontWeight: true,
                //     },
                // },
                graphic: {
                    elements: [
                        {
                            type: "image",
                            z: 1,
                            style: {
                                image: img,
                                width: 180,
                                height: 180,
                            },
                            left: "center",
                            top: "-1%",
                            position: [100, 100],
                        },
                    ],
                },
                tooltip: {
                    show: true,
                },
                legend: {
                    orient: 'vertical',
                    x:'right',
                    y:'bottom',
                    icon:'circle',
                    show: true,
                    textStyle: {
                        color: "#FFFFFF",
                    },
                    data: ["IP广播（个）", "调频广播（个）", ],
                },
                toolbox: {
                    show: true,
                },
                series: seriesOption,
            };
            let chart1 = echarts.init(document.getElementById("echart1"));
            chart1.setOption(option);
            this.pieActive(chart1, option)
        },
        initEchart2() {
            let angle = 0; //角度，用来做简单的动画效果的
            var timerId;


            //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
            function getCirlPoint(x0, y0, r, angle) {
                let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                return {
                    x: x1,
                    y: y1
                }
            }

            function draw() {
                angle = angle + 3
                myChart.setOption(option, true)
                //window.requestAnimationFrame(draw);
            }
            if (timerId) {
                clearInterval(timerId);
            }
            // timerId = setInterval(function() {
            //     //用setInterval做动画感觉有问题
            //     draw()
            // }, 100);
            for(let o=0; o<5;o++){
                let value = parseInt(100*Math.random());
                let option = {
                    // backgroundColor: '#000E1A',
                    title: {
                        text: '{a|' + value + '}{c|%}',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: 20,
                                    color: '#29EEF3'
                                },

                                c: {
                                    fontSize: 20,
                                    color: '#ffffff',
                                    // padding: [5,0]
                                }
                            }
                        }
                    },

                    series: [
                        /** 环状动画 */
                        // 紫色
                        // {
                        //     name: "ring5",
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         return {
                        //             type: 'arc',
                        //             shape: {
                        //                 cx: api.getWidth() / 2,
                        //                 cy: api.getHeight() / 2,
                        //                 r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                        //                 startAngle: (0 + angle) * Math.PI / 180,
                        //                 endAngle: (90 + angle) * Math.PI / 180
                        //             },
                        //             style: {
                        //                 stroke: "#8383FA",
                        //                 fill: "transparent",
                        //                 lineWidth: 1.5
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        // {
                        //     name: "ring5", //紫点
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         let x0 = api.getWidth() / 2;
                        //         let y0 = api.getHeight() / 2;
                        //         let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
                        //         let point = getCirlPoint(x0, y0, r, (90 + angle))
                        //         return {
                        //             type: 'circle',
                        //             shape: {
                        //                 cx: point.x,
                        //                 cy: point.y,
                        //                 r: 4
                        //             },
                        //             style: {
                        //                 stroke: "#8450F9", //绿
                        //                 fill: "#8450F9"
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        // 蓝色

                        // {
                        //     name: "ring5",
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         return {
                        //             type: 'arc',
                        //             shape: {
                        //                 cx: api.getWidth() / 2,
                        //                 cy: api.getHeight() / 2,
                        //                 r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                        //                 startAngle: (180 + angle) * Math.PI / 180,
                        //                 endAngle: (270 + angle) * Math.PI / 180
                        //             },
                        //             style: {
                        //                 stroke: "#4386FA",
                        //                 fill: "transparent",
                        //                 lineWidth: 1.5
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        // {
                        //     name: "ring5", // 蓝色
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         let x0 = api.getWidth() / 2;
                        //         let y0 = api.getHeight() / 2;
                        //         let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
                        //         let point = getCirlPoint(x0, y0, r, (180 + angle))
                        //         return {
                        //             type: 'circle',
                        //             shape: {
                        //                 cx: point.x,
                        //                 cy: point.y,
                        //                 r: 4
                        //             },
                        //             style: {
                        //                 stroke: "#4386FA", //绿
                        //                 fill: "#4386FA"
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },

                        // {
                        //     name: "ring5",
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         return {
                        //             type: 'arc',
                        //             shape: {
                        //                 cx: api.getWidth() / 2,
                        //                 cy: api.getHeight() / 2,
                        //                 r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        //                 startAngle: (270 + -angle) * Math.PI / 180,
                        //                 endAngle: (40 + -angle) * Math.PI / 180
                        //             },
                        //             style: {
                        //                 stroke: "#0CD3DB",
                        //                 fill: "transparent",
                        //                 lineWidth: 1.5
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        // 橘色

                        // {
                        //     name: "ring5",
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         return {
                        //             type: 'arc',
                        //             shape: {
                        //                 cx: api.getWidth() / 2,
                        //                 cy: api.getHeight() / 2,
                        //                 r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        //                 startAngle: (90 + -angle) * Math.PI / 180,
                        //                 endAngle: (220 + -angle) * Math.PI / 180
                        //             },
                        //             style: {
                        //                 stroke: "#2eb9ee",
                        //                 fill: "transparent",
                        //                 lineWidth: 1.5
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        // {
                        //     name: "ring5",
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         let x0 = api.getWidth() / 2;
                        //         let y0 = api.getHeight() / 2;
                        //         let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                        //         let point = getCirlPoint(x0, y0, r, (90 + -angle))
                        //         return {
                        //             type: 'circle',
                        //             shape: {
                        //                 cx: point.x,
                        //                 cy: point.y,
                        //                 r: 4
                        //             },
                        //             style: {
                        //                 stroke: "#40acd5", //粉
                        //                 fill: "#3b95d7"
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        // {
                        //     name: "ring5", //绿点
                        //     type: 'custom',
                        //     coordinateSystem: "none",
                        //     renderItem: function(params, api) {
                        //         let x0 = api.getWidth() / 2;
                        //         let y0 = api.getHeight() / 2;
                        //         let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                        //         let point = getCirlPoint(x0, y0, r, (270 + -angle))
                        //         return {
                        //             type: 'circle',
                        //             shape: {
                        //                 cx: point.x,
                        //                 cy: point.y,
                        //                 r: 4
                        //             },
                        //             style: {
                        //                 stroke: "#0CD3DB", //绿
                        //                 fill: "#0CD3DB"
                        //             },
                        //             silent: true
                        //         };
                        //     },
                        //     data: [0]
                        // },
                        /** 俩饼 */
                        {
                            name: '',
                            type: 'pie',
                            radius: ['72%', '66%'],
                            silent: true,
                            clockwise: true,
                            startAngle: 90,
                            z: 0,
                            zlevel: 0,
                            label: {
                                normal: {
                                    position: "center",

                                }
                            },
                            data: [{
                                value: value,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        color: { // 完成的圆环的颜色
                                            colorStops: [{
                                                offset: 0,
                                                color: '#A098FC' // 0% 处的颜色
                                            },
                                                {
                                                    offset: 0.3,
                                                    color: '#4386FA' // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.6,
                                                    color: '#4FADFD' // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: '#0CD3DB' // 100% 处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: '#646CF9' // 100% 处的颜色
                                                }
                                            ]
                                        },
                                    }
                                }
                            },
                                {
                                    value: 100 - value,
                                    name: "",
                                    label: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#173164"
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name: '',
                            type: 'pie',
                            radius: ['61%', '35%'],
                            silent: true,
                            clockwise: true,
                            startAngle: 270,
                            z: 0,
                            zlevel: 0,
                            label: {
                                normal: {
                                    position: "center",

                                }
                            },
                            data: [{
                                value: value,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        color: { // 完成的圆环的颜色
                                            colorStops: [{
                                                offset: 0,
                                                color: '#00EDF3' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#646CF9' // 100% 处的颜色
                                            }]
                                        },
                                    }
                                }
                            },
                                {
                                    value: 100 - value,
                                    name: "",
                                    label: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#173164"
                                        }
                                    }
                                }
                            ]
                        },

                    ]
                };
                let chart = document.getElementById(`echart${o+2}`);
                let myChart = echarts.init(chart);
                myChart.setOption(option);
            }

        },
        // 饼状图实现循环高亮
        pieActive(myChart, option) {
            let index = -1; //高亮所在下标
            let dataLength = option.series[0].data.length; // 当前饼图有多少个扇形
            // 用定时器控制饼图高亮
            this.mTime = setInterval(() => {
                // 清除之前的高亮
                myChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: index,
                });
                index = (index + 1) % dataLength;
                // 当前下标高亮
                myChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: index,
                });
                myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: index,
                });

                if (index > dataLength) {
                    index = 0;
                }
            }, 2000);
            // 鼠标划入
            // myChart.on("mouseover", () => {
            //   // 停止定时器，清除之前的高亮
            //   clearInterval(this.mTime);
            //   myChart.dispatchAction({
            //     type: "downplay",
            //     seriesIndex: 0,
            //     dataIndex: index,
            //   });
            // });
        },
    },
};
</script>
<style lang="less" scoped>
@import "../../../styles/fonts/fontNum.less";
/*清除浮动工具*/
.clearfix{
    content: '';
    display: block;
    clear: both;
    height: 0;
}

/deep/.selector{
    background-color: #244A817A;
    position: relative;
    border-radius: 8px;
}
/deep/.ivu-select-item{
    color: #FFFFFF;
    &:hover{
        background-color: rgba(36, 74, 129, 0.51);
    }
}
/deep/.ivu-select-dropdown{
    top: 30px!important;
    left: 0px!important;
    //top: 60px!important;
    //left: 1786px!important;
    color: #ffffff;
    background-color: #244A817A;
}
/deep/.ivu-select-selection{
    background-color: unset;
    border:0;
}
/deep/.ivu-select-selected-value{
    color: #FFFFFF;
}

/* 公用一个title样式 */
.title-box{
    margin: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-content{
        div:nth-child(1){
            text-align: left;
            font-family: 'ShiShangZhongHeiJianTi';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
            text-transform: uppercase;
            color: #FFFFFF;
        }
        div:nth-child(2){
            margin-top: 3px;
            font-family: 'ShiShangZhongHeiJianTi';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 14px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.32);

        }
    }
}

/* 小图标✓ */
.correct {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #3BDD68;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    position: relative;
    &::before{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 38%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(316deg);
        position: absolute;
        top: calc(~'100% - 50%');
        right: calc(~'100% - 89%');
    }
    &::after{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 69%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(59deg);
        position: absolute;
        top: calc(~'100% - 41%');
        right: calc(~'100% - 50%');
    }
}
/* 小图标✕ */
.incorrect {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #D93E3E;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    position: relative;
    &::before{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 40%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(317deg);
        position: absolute;
        top: calc(~'100% - 54%');
        right: calc(~'100% - 81%');
    }
    &::after{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 40%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(42deg);
        position: absolute;
        top: calc(~'100% - 53%');
        right: calc(~'100% - 79%');
    }
}

.scroll-box{
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    background-image: linear-gradient(90deg, rgba(4, 53, 99, 0.4), rgba(4, 53, 99, 0.12));
    position: relative;
    &::before{
        content: '';
        border-top: 1px solid #2993FB;
        border-left: 1px solid #2993FB;
        position: absolute;
        width: 8px;
        height: 8px;
        top: 0;
        left: 0;
    }
    &::after{
        content: '';
        border-bottom: 1px solid #2993FB;
        border-left: 1px solid #2993FB;
        position: absolute;
        width: 8px;
        height: 8px;
        top: 118px;
        left: 0;
    }
    .content-box{
        div:nth-child(1){
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
        }
        div:nth-child(2){
            color: rgba(242, 246, 250, 0.72);
        }
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    img{
        border: 2px solid #12528D;
        width: 144px;
        height: 106px;

    }
}


.map{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}
.menu-left{
    top: 95px;
    left: 20px;
    position: absolute;
    height: 970px;
    width: 400px;
    margin-right: 16px;
    display: inline-block;
    .left-head-container{
        border-radius: 8px;
        background-color: #11387052;
        overflow: hidden;
        .weather-box{
            margin: 24px 20px;
            border-radius: 8px;
            background-color: #244A8152;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .roll-Time,.icon-box,.location-box{
                padding: 20px;
            }
            .roll-Time{
                div:nth-child(1){
                    font-family: 'DIN';
                    font-style: normal;
                    font-weight: 500;
                    font-size: 24px;
                    line-height: 29px;
                    text-align: center;
                    color: #FFFFFF;
                    margin-bottom: 5px;
                }
                div:nth-child(2){
                    font-family: 'PingFang SC';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 17px;
                    text-align: center;
                    color: rgba(255, 255, 255, 0.64);
                }
            }
            .icon-box{
                .icon{
                    width: 72px;
                    height: 72px;
                }
                div:nth-child(2){
                    color: rgba(255, 255, 255, 0.62);
                }
            }
            .location-box{
                div:nth-child(1){
                    font-family: 'DIN';
                    font-style: normal;
                    font-weight: 500;
                    font-size: 24px;
                    line-height: 29px;
                    text-align: right;
                    color: #FFFFFF;
                }
                div:nth-child(2){
                    color: rgba(255, 255, 255, 0.64);
                    position: relative;
                    /* 图标 */
                    .pin {
                        width: 20px;
                        height: 20px;
                        border-radius: 50% 50% 50% 0;
                        background: #FFA14A;
                        position: absolute;
                        transform: rotate(-45deg);
                        left: -12.9%;
                        top: 93%;
                        margin: -20px 0 0 -20px;
                        animation-name: bounce;
                        animation-duration: 1s;
                    }
                    .pin:after {
                        content: '';
                        width: 10px;
                        height: 11px;
                        margin: 7px 0 0 7px;
                        background: rgba(246, 246, 246, 0.95);
                        position: absolute;
                        top: -2px;
                        left: -4px;
                        border-radius: 50%;
                    }
                    .pulse {
                        background: rgba(0,0,0,0.2);
                        border-radius: 50%;
                        height: 14px;
                        width: 14px;
                        position: absolute;
                        left: -18%;
                        top: 21%;
                        margin: 11px 0px 0px -12px;
                        transform: rotateX(55deg);
                        z-index: 10;
                        &::after{
                            content: "";
                            border-radius: 50%;
                            height: 16px;
                            width: 30px;
                            position: absolute;
                            margin: 0px 0 0 -15px;
                            animation: pulsate 1s ease-out;
                            animation-iteration-count: infinite;
                            opacity: 0;
                            -webkit-box-shadow: 0 0 1px 2px #89849b;
                            box-shadow: 0 0 1px 2px #FFA14A;
                            animation-delay: 1.1s;
                        }
                    }
                    @keyframes pulsate {
                        0% {
                            transform: scale(0.1, 0.1);
                            opacity: 0;
                        }
                        50% {
                            opacity: 1;
                        }
                        100% {
                            transform: scale(1.2, 1.2);
                            opacity: 0;
                        }
                    }
                    @keyframes bounce {
                        0% {
                            opacity: 0;
                            transform: translateY(-2000px) rotate(-45deg);
                        }
                        60% {
                            opacity: 1;
                            transform: translateY(30px) rotate(-45deg);
                        }
                        80% {
                            transform: translateY(-10px) rotate(-45deg);
                        }
                        100% {
                            transform: translateY(0) rotate(-45deg);
                        }
                    }
                    .location{
                        margin-top: 10px;
                    }
                }
            }
        }
        .equipment-box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0px 20px 20px 20px;
            .item-box{
                display: flex;
                .item-content{
                    margin-left: 5px;
                    div:nth-child(1){
                        font-family: 'PingFang SC';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 20px;
                        color: #FFFFFF;
                    }
                    div:nth-child(2){
                        font-family: 'Furore';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 36px;
                        line-height: 41px;
                        color: #F2F6FA;
                        margin: 5px 0;
                    }
                    div:nth-child(3){
                        font-family: 'PingFang SC';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 20px;
                        color: rgba(255, 255, 255, 0.64);
                    }
                }
                img{
                    width: 66px;
                    height: 66px;
                }
            }
        }
    }
    .left-under-chart{
        width: 100%;
        height: 195px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left-middle-container{
        height: 404px;
        margin-top: 16px;
        margin-bottom: 16px;
        border-radius: 8px;
        background-color: #11387052;
        overflow: hidden;
        .table-header{
            margin: 20px 20px 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(255, 255, 255, 0.82);
            font-size: 14px;
        }
        .scroll-container{
            overflow: hidden;
            margin: 0px 20px 0px 20px;
            .under-container{
                height: 260px;
                margin-bottom: 20px;
                .table-item{
                    margin-bottom: 18px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    div:nth-child(2){
                        margin-right: 15px;
                    }
                }
            }

        }
    }
}
.menu-right{
    top: 95px;
    right: 20px;
    position: absolute;
    display: inline-block;
    height: 970px;
    width: 400px;
    .right-head-container{
        border-radius: 8px;
        overflow: hidden;
        background-color: #11387052;
        .right-head-charts{
            display: flex;
            align-items: center;

            .chart-content-box{
                height: 644px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .charts-content{
                    .title{
                        display: flex;
                        align-items: center;
                        font-family: 'Source Han Sans CN';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 22px;
                        color: #B4C0CC;
                        img{
                            width: 25px;
                            height: 25px;
                            margin-right: 10px;
                        }
                    }
                    .nums{
                        font-family: 'Furore';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 50px;
                        line-height: 56px;
                        color: #F2F6FA;
                        display: flex;
                        align-items: center;
                        img{
                            margin:10px 10px 0 10px;
                            width: 25px;
                            height: 25px;
                        }
                        .gain{
                            margin-top: 10px;
                            font-family: 'DIN';
                            font-style: normal;
                            font-weight: 700;
                            font-size: 18px;
                            line-height: 29px;
                        }
                    }
                }
            }
            .charts{
                .each-chart{
                    width: 129px;
                    height: 129px;
                }
            }
        }
    }
    .right-bottom-container{
        margin-top: 16px;
        border-radius: 8px;
        overflow: hidden;
        background-color: #11387052;
    }
}
.bottom-menu-container{
    position: absolute;
    display: inline-flex;
    justify-content: space-around;
    width: 836px;
    left: 542px;
    top: 95px;
    border-radius: 8px;
    background-color: #11387052;
    box-shadow: 0 0 1px 3px #15C0F629;
    align-items: center;
    padding: 10px;
    .item{
        display: inline-block;
        img{
            display: inline-block;
            width: 56px;
            height: 56px;
            margin-right: 15px;
        }
        .item-content{
            display: inline-block;
            .title{
                font-size: 14px;
                line-height: 20px;
            }
            .num{
                text-align: left;
                font-family: 'Furore';
                font-style: normal;
                font-weight: 400;
                font-size: 24px;
                line-height: 28px;
                color: #FFFFFF;
                &::after{
                    content: '处';
                    margin-left: 3px;
                    font-size: 12px;
                    line-height: 17px;
                }
            }
        }
    }
}
.bottom-menu-left-container{
    position: absolute;
    bottom: 32px;
    left: 456px;
    border: dashed 1px #01CEFFA3;
    border-radius: 8px;
    padding: 12px 20px;
    .item{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        img{
            display: inline-block;
            width: 28px;
            height: 40px;
            margin-right: 10px;
        }

    }
}


</style>
<style lang="less">
.model{
    position: absolute;
    top: 90px;
    left: calc(~'50% - 280px');
    background-color: #0A1A34CC;
    .pointLine{
        width: 123px;
        height: 85px;
        position: absolute;
        top: 0;
        left: -103px;
    }
.button{
    cursor: pointer;
img{

    padding: 0;
    width: 32px;
    height: 32px;
}
position: absolute;
right: -15px;
top: -10px;
}
&::before{
     width: 40px;
     height: 9px;
     content: '';
     background-image: url("../../../assets/bigScreenHome/model-icon.png");
     background-size: 100%;
     position: absolute;
     top: -3px;
     left: 0;
     background-repeat: no-repeat;
 }
.title{
    text-align: left;
    padding: 10px 0px 10px 40px;
    background-image: url("../../../assets/bigScreenHome/box.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
.image{
    border-radius: 2px;
    border: 1px solid #59AFF9;
    margin: 0 10px;
    width: 400px;
}
.location-text{
    padding: 10px 10px;
    text-align: left;
    font-size: 16px;
div{
    color: #59AFF9;
span{
    color: #E5ECF3;
}
}
}
}
</style>
